<template>
   <!-- 会员 -->
    <div class="member">
     
        <!-- 会员等级 -->
       <div class="v_box">
           <div class="table">
                 <el-table
                  :data="content"
                   border
                   style="width: 100%">
                     <el-table-column
                       prop="level"
                       label="会员等级">
                     </el-table-column>
                     <el-table-column
                       prop="name"
                       label="会员名称">
                     </el-table-column>
                      <el-table-column
                       label="会员特权">
                       <template slot-scope="cope">
                       <span>--</span>
                     </template>
                     </el-table-column>
                      <el-table-column
                       prop="pointNum"
                       label="所需积分">
                     </el-table-column>
                      <el-table-column
                       label="操作">
                       <template slot-scope="scope">
                         <el-button @click="getVipid(scope.row.id)" type="text">编辑</el-button>
                       </template>
                     </el-table-column>
                  </el-table>
           </div>
           <div class="rule">
             <div class="title">会员规则<a href="javaScript:;" @click="show()">编辑</a></div>
             <div  v-html="editors"></div>
           </div>  
       </div>  

      <!-- 蒙层 -->
       <div class="modal" ref="modal"></div>    
       <!-- 编辑规则 -->
       <div class="edit_rule" ref="edit_rule">
        <div class="top">编辑规则<i class="iconfont icon-guanbi2"  @click="close()"></i></div>
         <div class="box">
          <textarea name="editorr" id="editor"></textarea>
          <el-button @click="putFile()">保存</el-button></div>
         </div>
         <!-- 编辑会员 -->
       <div class="edit_vip" ref="edit_vip">
        <div class="top">会员等级<i class="iconfont icon-guanbi2"  @click="vipclose()"></i></div>
         <div class="box">
            <div class="row clearfix">
               <div class="row_l">会员等级</div>
               <div class="row_r"><p>{{list.level}}</p></div>
            </div>
            <div class="row clearfix">
               <div class="row_l">会员名称</div>
               <div class="row_r"><el-input placeholder="请输入会员名称" v-model="input1"></el-input></div>
            </div>
            <div class="row clearfix">
               <div class="row_l">会员折扣</div>
               <div class="row_r"><p>——</p></div>
            </div>
            <div class="row clearfix">
               <div class="row_l">所需积分</div>
               <div class="row_r"><el-input placeholder="请输入所需积分" v-model="input2" v-if="list.level!=1"></el-input><p v-if="list.level==1">{{list.pointNum}}</p></div>
            </div>
            <el-button @click="putVipid">确定</el-button></div>
         </div>

       </div>

    </div>
</template>

<script>

    import {commonService} from '../../service/commonService.js'
    import CKEDITOR from "../../../src/assets/js/common/ckeditor/ckeditor"

    export default {
        name: 'app',
        data: function (){
            return {
              input:'',
              list:'',
               options: [{
                   value: '选项1',
                   label: '增加'
                 }, {
                   value: '选项2',
                   label: '减少'
                 }],
                    value: '选项1',
                    content:[],
                    input1:'',
                    input2:'',
                    editors:'',
                    fileid:'',
                    title:'',


             }
        },
        mounted(){
           this.editor()
           // this.getVips()
           // this.getRule()
        },
        methods: {
             editor(){
                let CKEDITOR = window.CKEDITOR;
                let editor = CKEDITOR.replace("editor",
                    {height: "240px",
                        width: "100%",
                        toolbar: "Full",
                        language : 'zh-cn',
                        filebrowserImageUploadUrl : 'http://api.welltour.cn/ckFiles?backUrl=http://9p2w4x.natappfree.cc/ck',
                        image_previewText : '',});
                   editor.setData(this.editors);
            },

          // 规则
          show:function(){
            this.getRule()
            window.CKEDITOR.instances.editor.setData(this.editors);
             this.$refs.modal.style.display="block"
             this.$refs.edit_rule.style.display="block"

          },
          close:function(){
            this.$refs.modal.style.display="none"
            this.$refs.edit_rule.style.display="none"
          },
          // 规则
          vipshow:function(){
             this.$refs.modal.style.display="block"
             this.$refs.edit_vip.style.display="block"
          },
          vipclose:function(){
            this.$refs.modal.style.display="none"
            this.$refs.edit_vip.style.display="none"
          },
       
            // 获取vip列表
         getVips:function(){
              let that=this;
              commonService.getVips().then(function(res){
                that.content=res.data.datas
              })
            },
   
              // 获取规则
          getRule:function(){
              let that=this;
              commonService.getRule({type:2}).then(function(res){
              that.editors=res.data.datas.content
              that.fileid=res.data.datas.id
              that.title=res.data.datas.title
              })
            },
           // 修改规则
           putFile:function(){
              let that=this;
              that.editors=window.CKEDITOR.instances.editor.getData()
              commonService.putFile({id:that.fileid,title:that.title,content:this.editors,type:2}).then(function(res){
                    if(res.data.code == 200){
                         that.close()
                         that.getRule()
                          
                    }else{
                        that.$message.error(res.data.message);
                    }
              })
            },  
        },

    }
</script>

<style lang="less">
  
      .member{
        
          .v_box{
            display: block;
            padding: 0 20px;
          
            .table{
                width: 100%;
                margin-top: 40px;
          
            }
            .rule{
               // margin-top: 60px;
               width: 800px;
               margin: 60px auto 0;
               .title{
                text-align: center;
                 position: relative;
                 font-size: 16px;
                 color: #333;
                 line-height: 24px;
                 margin-bottom: 10px;
                 a{
                  font-size: 14px;
                  line-height: 24px;
                  cursor: pointer;
                  position: absolute;
                  right: 10px;
                  top: 0px;
                   color: #0017ff;
                 }
               }
            }
          }
           .modal{
                display:none; 
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: .5;
                background: #000;
                z-index: 2000;
          }
          // 编辑规则
          .edit_rule{
            display: block;
             position: fixed;
             left: 50%;
             top: 0;
             z-index: 2001;
             background: #fff;
             width: 1000px;
             margin-left: -500px;
             border:1px solid #f5f7fa;
              .top{
                font-size: 16px;
                line-height: 40px;
                border-bottom: 1px solid #f5f7fa;
                padding-left:20px;
                position: relative;
                i{
                   font-size: 22px;
                   line-height: 40px;
                   position: absolute;
                   right:20px;
                   top: 0; 
                   color: #888;
                   cursor: pointer;
                }
              }
              .box{
                padding: 20px 20px;
                button{
                  margin: 20px 0 0 470px;
                }
              }
          }
          // 编辑会员
          .edit_vip{
            display: none;
             position: fixed;
             left: 50%;
             top: 130px;
             z-index: 2001;
             background: #fff;
             width: 400px;
             margin-left: -200px;
             border:1px solid #f5f7fa;
              .top{
                font-size: 16px;
                line-height: 40px;
                border-bottom: 1px solid #f5f7fa;
                padding-left:20px;
                position: relative;
                i{
                   font-size: 22px;
                   line-height: 40px;
                   position: absolute;
                   right:20px;
                   top: 0; 
                   color: #888;
                   cursor: pointer;
                }
              }
              .box{
                padding: 20px 20px;
                .row{
                    margin-top: 10px;
                    .row_l{
                      float: left;
                      line-height: 36px;
                      font-size: 14px;
                      color: #333;
                    }
                    .row_r{
                      float: left;
                      width: 240px;
                      margin-left: 20px;
                      p{
                        font-size: 14px;
                        line-height: 36px;
                      }
                    }
                }
                button{
                  margin: 20px 0 0 140px;
                }
              }
          }


      }

</style>
